<template>
  <div style="background: #fff; padding: 20px; box-sizing: border-box">
    <a-row>
      <a-col :span="12">
        <a-select
          allowClear
          show-search
          placeholder="请选择计划"
          option-filter-prop="children"
          style="width: 200px;margin-right: 20px;"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
        >
          <a-select-option v-for="(item,index) in plan" :key="index" :value="item.id">
            {{ item.planName }}
          </a-select-option>

        </a-select>
        <a-range-picker style="margin-right: 20px;" @change="onChange"/>
        <a-button type="primary" @click="search" style="background: #3C67F1;border: none;">查询</a-button>
      </a-col>
      <a-col :span="12" style="text-align: right;">
        <a-button type="primary" icon="appstore" @click="RecordPopupBtn" style="background: #3C67F1;border: none;">
          灌溉记录查看
        </a-button>
      </a-col>
      <a-col :span="24" style="text-align: right;margin-top: 20px;">
        <span class="ststus">
          <img src="../../../assets/icon/yc.png"/>
          异常
        </span>
        <span class="ststus">
          <img src="../../../assets/icon/zc.png"/>
          正常
        </span>
      </a-col>
      <a-col :span="24" style="text-align: right;margin-top: 20px;">
        <a-table :columns="columns" :rowKey="(record,index)=>{return index}" :data-source="data" bordered>
          <!-- slot-scope="text, record" -->
          <span slot="indexRender" slot-scope="record, index, indent, expanded">
                {{ indent + 1 }}
         </span>
          <span slot="pump" slot-scope="record, index, indent, expanded">
                {{ index.isSystem == '0' ? '一号系统' : index.isSystem == '1' ? '二号系统' : '未绑定' }}
         </span>
          <span slot="status" slot-scope="record, index, indent, expanded">
                {{ index.status == '0' ? '未执行' : index.status == '1' ? '执行中' : index.status == '2' ? '已结束' : '终止' }}
         </span>
          <span slot="flag" slot-scope="record, index, indent, expanded">
                {{ index.flag == '0' ? '正常' : '异常' }}
         </span>
          <span slot="irrigationTotal" slot-scope="record, index, indent, expanded">
                {{ index.irrigationTotal }}分钟
         </span>
          <span slot="irrigationWater" slot-scope="record, index, indent, expanded">
                {{ index.irrigationWater }}mm
         </span>
          <span slot="irrigationTiming" slot-scope="record, index, indent, expanded">
                {{ index.irrigationTiming }}分钟
         </span>
        </a-table>
      </a-col>
    </a-row>
    <!-- 弹框 -->
    <RecordPopup ref="RecordPopup"></RecordPopup>
  </div>
</template>
<script>
import RecordPopup from './RecordPopup.vue'
import {plaNRecordList, queryPlan} from '@/api/device'

const columns = [
  {
    title: '序号',
    dataIndex: 'name',
    scopedSlots: {customRender: 'indexRender'}
  },
  {
    title: '计划名称',
    dataIndex: 'planName'
  },
  {
    title: '状态',
    scopedSlots: {customRender: 'flag'}
  },
  {
    title: '创建时间',
    dataIndex: 'createDate'
  },
  {
    title: '轮灌组',
    dataIndex: 'groupNames'
  },
  {
    title: '灌溉开始时间',
    dataIndex: 'startDate'
  },
  {
    title: '灌溉结束时间',
    dataIndex: 'endDate'
  },
  {
    title: '总灌溉时长',
    scopedSlots: {customRender: 'irrigationTotal'}
  },
  {
    title: '已灌时长',
    scopedSlots: {customRender: 'irrigationTiming'}
  },
  {
    title: '灌溉量',
    scopedSlots: {customRender: 'irrigationWater'}
  },
  {
    title: '灌溉情况',
    dataIndex: 'status',
    scopedSlots: {customRender: 'status'}
  }
]


export default {
  data() {
    return {
      data: [],
      columns,
      pageNo: 1,
      pageSize: 10,
      plan: [],
      name: '',
      sTime: '',
      eTime: ''
    }
  },
  components: {
    RecordPopup
  },
  mounted() {
    this.dataList(this.pageNo, this.pageSize, this.name, this.sTime, this.eTime)
    this.planList()
  },
  methods: {
    search() {
      this.dataList(this.pageNo, this.pageSize, this.name == undefined ? '' : this.name, this.sTime, this.eTime)
    },
    onChange(date, dateString) {
      this.sTime = dateString[0]
      this.eTime = dateString[1]
      // console.log(date, dateString);
    },
    // 搜索
    handleChange(value) {
      this.name = value
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    // 控制弹窗
    RecordPopupBtn() {
      this.$refs.RecordPopup.modal2Visible = true
      this.$refs.RecordPopup.dataList()
    },
    dataList(pageNo, pageSize, planId, sTime, eTime) {
      plaNRecordList(pageNo, pageSize, planId, sTime, eTime).then(res => {
        console.log(res)
        this.data = res.result.records
      }).catch(err => {

      })
    },
    planList() {
      queryPlan().then(res => {
        console.log(res)
        this.plan = res.result
      }).catch(err => {

      })
    }
  }
}
</script>
<style scoped>
.ststus {
  display: inline-flex;
  margin-left: 10px;
}

.ststus img {
  margin-right: 10px;
}
</style>